<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>实时数据 </span>
        </div>
      </div>
      <div class="bzjk_box flex_center" slot="content" :data="top1">
        <div class="sjtj_item backgroung flex_between_direction" style="color: rgba(0, 192, 255, 0.9)">
          <div class="title flex_center">当日实时产量</div>
          <div class="number flex_center" style="border-bottom: 3px solid rgba(0, 192, 255, 0.9)">
            <div class="num_top">{{ top1.dayBotleCount }}</div>
            <div class="num_bottom">箱</div>
          </div>
        </div>
        <div class="sjtj_item backgroung flex_between_direction" style="color: rgba(255, 153, 0, 0.9)">
          <div class="title flex_center">当日生产计划</div>
          <div class="number flex_center" style="border-bottom: 3px solid rgba(255, 153, 0, 0.9)">
            <div class="num_top">{{ top1.dayPlanCount }}</div>
            <div class="num_bottom">标准箱</div>
          </div>
        </div>
        <div class="sjtj_item backgroung flex_between_direction" style="color: rgba(59, 255, 230, 0.9)">
          <div class="title flex_center">当月累计产量</div>
          <div class="number flex_center" style="border-bottom: 3px solid rgba(59, 255, 230, 0.9)">
            <div class="num_top">{{ top1.monthCount }}</div>
            <div class="num_bottom">标准箱</div>
          </div>
        </div>
        <div class="sjtj_item backgroung flex_between_direction" style="color: rgba(254, 58, 234, 0.9)">
          <div class="title flex_center">当月完成计划进度</div>
          <div class="number flex_center" style="border-bottom: 3px solid rgba(254, 58, 234, 0.9)">
            <div class="num_top_baifenbi">{{ top1.monthRate }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_center">
      <div class="title_box">
        <div class="top">
          <div class="border"></div>
          <span>统计分析 </span>
        </div>
      </div>
      <div class="echartsBox">
        <!-- 02完成分析 -->
        <StrokeTitle4 :isCenter="true" title="计划完成分析" class="" style="width: 49.6%; height: 47.6%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange2" />
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg3 :data="bottom2a" :isLenged="false" :showLabel="true" itemWidth="1" cirLeft="2"
              :img="require('@/assets/images/echarts/djdscwc.png')" :color="['#00ebcd', '#ff7474']" />
            <div style="width: 100%; height: 100%" class="flex_center" v-if="bottom2b.length > 0">
              <div class="clzdjd_box">
                <div class="clzdjd_item flex_center" v-for="(item, index) in bottom2b" :key="index">
                  <div class="clzdjd_item_left flex_between">
                    <div class="bigCir flex_center" :style="{
                        border: '1px solid rgba(' + color[index] + ',0.4)',
                      }">
                      <div class="smallCir" :style="{
                          border: '1px solid rgba(' + color[index] + ',1)',
                        }"></div>
                      <div class="border" :style="{ background: 'rgba(' + color[index] + ',1)' }"></div>
                    </div>
                  </div>
                  <div class="clzdjd_item_right flex_center">
                    <div class="lt" :style="{ color: 'rgba(' + color[index] + ',1)' }">
                      {{ item.name }}
                    </div>
                    <div class="rt" :style="{ color: 'rgba(' + color[index] + ',1)' }">
                      {{ item.value }}标准箱
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle4>
        <!-- 01分类分析 -->
        <StrokeTitle4 :isCenter="true" title="计划分类分析" class="" style="width: 49.6%; height: 47.6%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange1" />
            <div class="all_box" style="margin-left: 0px" @click="productPlanCount2All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <XRow class="cntjEcharts" :data="bottom1" barRight="15%" barLeft="13%" barWidth="6" xUnit="标准箱"></XRow>
          </div>
        </StrokeTitle4>

        <!-- 03停机分析 -->
        <StrokeTitle4 :isCenter="true" title="停机分析" class="" style="width: 49.6%; height: 47.6%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange3" />
            <div class="all_box" style="margin-left: 0px" @click="productDayCount4All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts tjfx" slot="content">
            <XRow class="cntjEcharts" :isxAxis="true" :data="bottom3.list" @xRowEcharts="xRowEcharts"
              itemStyleLabel="value2" barRight="30%" barLeft="13%" barWidth="6" :xUnit="'时（总时长：' + bottom3.all + ')'"
              :isTooltip="false"></XRow>
            <!-- <div class="tjfx_left" v-if="bottom3.length > 1">
              <div class="tjfx_left_top">
                <div class="zctj">{{ bottom3[1].name }}</div>
                <div class="tjsz_lt">
                  <div class="tjcs">
                    <div class="tjcs_lt">停机次数</div>
                    <div class="tjcs_rt">{{ bottom3[1].value1 }}</div>
                  </div>
                  <div class="tjsc">
                    <div class="tjsc_lt">停机时长</div>
                    <div class="tjsc_rt">{{ bottom3[1].value2 }}</div>
                  </div>
                  <div class="zb">
                    <div class="zb_lt">占比</div>
                    <div class="zb_rt">{{ bottom3[1].value3 }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tjfx_center" slot="content">
              <PieImg3 :data="bottom3a" :isLenged="false" :showLabel="false" length="2" itemWidth="1" cirLeft="center" :img="require('@/assets/images/echarts/32.png')" :color="['#23c3ff','#3bffe6']" />
            </div>
            <div class="tjfx_right" v-if="bottom3.length > 0" slot="content">
              <div class="tjfx_left_top">
                <div class="yctj">{{ bottom3[0].name }}</div>
                <div class="tjsz_rt">
                  <div class="tjcs">
                    <div class="tjcs_lt">停机次数</div>
                    <div class="tjcs_rt">{{ bottom3[0].value1 }}</div>
                  </div>
                  <div class="tjsc">
                    <div class="tjsc_lt">停机时长</div>
                    <div class="tjsc_rt">{{ bottom3[0].value2 }}</div>
                  </div>
                  <div class="zb">
                    <div class="zb_lt">占比</div>
                    <div class="zb_rt">{{ bottom3[0].value3 }}</div>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </StrokeTitle4>
        <!-- 04生产天数 -->
        <StrokeTitle4 :isCenter="true" title="生产天数" class="" style="width: 49.6%; height: 47.6%">
          <div class="flex_center" slot="select">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange4" />
            <div class="all_box" style="margin-left: 0px" @click="planCount4All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <!-- <div class="scts flex_center">
              <div class="scts_ts">
                <div class="tu">{{bottom4.weekdays||0}}</div>
                <div class="wenzi">生产天数</div>
              </div>
              <div class="center"></div>
              <div class="scts_ts">
                <div class="tu tu_2">{{bottom4.restDay||0}}</div>
                <div class="wenzi">未生产天数</div>
              </div>
            </div> -->
            <XRow barWidth="6" :data="bottom4" xUnit="标准箱" barRight="12%" barLeft="5%" />
          </div>
        </StrokeTitle4>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
  import {
    ProductDayCount1,
    ProductPlanCount2,
    ProductPlanCount3,
    ProductDayCount4_1,
    PlanCount4,
    ProductDayCount5,
  } from "@/api/produce/index.js";
  import { GetBoxDay } from "@/api/echarts/index";
  import StrokeTitle4 from "@/components/myComponents/stroke/title4.vue"; //容器
  import PieImg2 from "@/components/echarts/pie/img2.vue";
  import PieImg3 from "@/components/echarts/pie/img3.vue";
  export default {
    components: {
      StrokeTitle4,
      PieImg2,
      PieImg3,
    },
    name: "ProduceEcharts",
    data() {
      return {
        model: "month",
        //实时数据
        top1: {
          dayBotleCount: "", //当日实时产量
          dayPlanCount: "", //当日生产计划
          monthCount: "", //当月累计产量
          monthRate: "", //当月完成计划进度
        },
        //统计分析-分类分析
        bottom1: [],
        bottom1Form: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
          all: "",
        },
        //统计分析-完成分析
        color: ["35, 195, 255", "0, 235, 205", "255, 116, 116"],
        //计划完成度
        bottom2a: [],
        //计划完成度
        bottom2b: [],
        //计划完成度
        bottom2Form: {
          pDateEnd: this.$getMonth("e", 0),
          pDateStart: this.$getMonth("s", 0),
        },
        //统计分析-停机分析
        bottom3: { all: 0, list: [] },
        // bottom3a: [],
        bottom3Form: {
          stopDateEnd: this.$getMonth("e", 0),
          stopDateStart: this.$getMonth("s", 0),
          all: "",
        },
        //生产天数
        bottom4: {
          restDay: null,
          weekdays: null,
        },
        bottom4Form: {
          pDateStart: this.$getMonth("s", 0),
          pDateEnd: this.$getMonth("e", 0),
          deptId: "101",
          all: "",
        },
        timer2: null,
      };
    },
    beforeDestroy() {
      if (this.timer2) {
        clearInterval(this.timer2);
      }
    },
    deactivated() {
      if (this.timer2) {
        clearInterval(this.timer2);
      }
    },
    mounted() {
      this.productDayCount1(); //实时数据
      this.productPlanCount2(); //分类分析
      this.productPlanCount3(); //完成分析
      this.productDayCount4(); //停机分析
      this.planCount4(); //生产天数
      this.getBottleDay();
      if (this.timer2) {
        clearInterval(this.timer2);
      }
      this.timer2 = setInterval(() => {
        this.getBottleDay();
        this.productDayCount1();
      }, 10000);
    },
    activated() {
      this.productDayCount1(); //实时数据
      this.productPlanCount2(); //分类分析
      this.productPlanCount3(); //完成分析
      this.productDayCount4(); //停机分析
      this.planCount4(); //生产天数
      this.getBottleDay();
      if (this.timer2) {
        clearInterval(this.timer2);
      }
      this.timer2 = setInterval(() => {
        this.getBottleDay();
        this.productDayCount1();
      }, 10000);
    },
    methods: {
      //首页-产能统计-当日产量
      getBottleDay() {
        // GetBottleDay().then((res) => {
        //   if (res.code == 200) {
        //     let number = parseInt(res.data.bottle / 24);
        //     this.top1.dayBotleCount = number;
        //   }
        // });
        GetBoxDay().then((res) => {
          if (res.code == 200) {
            this.top1.dayBotleCount = res.data.bottle;
            //  this.left2.dayBotleCountPing = res.data.bottle.toString().split("");
            // let number = parseInt(res.data.bottle / 24)
            // .toString()
            // .split("");
            // console.log(number)
            // this.left2.dayBotleCountPing = number;
          }
        });
      },
      //实时数据
      productDayCount1() {
        ProductDayCount1().then((res) => {
          if (res.code == 200) {
            this.top1.dayPlanCount = res.data.dayPlanCount;
            this.top1.monthCount = res.data.monthCount;
            this.top1.monthRate = res.data.monthRate;
          }
        });
      },
      //统计分析-分类分析
      productPlanCount2() {
        ProductPlanCount2(this.bottom1Form).then((res) => {
          if (res.code == 200) {
            // console.log(2, res);
            this.bottom1 = res.data;
          }
        });
      },
      //统计分析-分类分析-全部
      productPlanCount2All() {
        let obj = JSON.parse(JSON.stringify(this.bottom1Form));
        obj.all = "111";
        ProductPlanCount2(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.unit = " 标准箱";
            this.$refs.AllDialog.right.unit = "";
            // this.$refs.AllDialog.tableData.column[1].prop = "value2";
            this.$refs.AllDialog.tableData.column[4].prop = "value";
            this.$refs.AllDialog.tableData.data = res.data;
          }
          this.$refs.AllDialog.dialogTableVisible = true;
        });
      },
      radioChange1(event) {
        this.bottom1Form.pDateStart = event[0];
        this.bottom1Form.pDateEnd = event[1];
        this.productPlanCount2();
      },
      //统计分析-完成分析
      productPlanCount3() {
        ProductPlanCount3(this.bottom2Form).then((res) => {
          if (res.code == 200) {
            if (res.data.length > 3) {
              res.data = res.data.slice(0, 3);
            }
            this.bottom2a = JSON.parse(JSON.stringify(res.data));
            this.bottom2a = this.bottom2a.slice(1);
            this.bottom2b = JSON.parse(JSON.stringify(res.data));
          }
        });
      },
      radioChange2(event) {
        this.bottom2Form.pDateStart = event[0];
        this.bottom2Form.pDateEnd = event[1];
        this.productPlanCount3();
      },
      //统计分析-停机分析
      productDayCount4() {
        ProductDayCount4_1(this.bottom3Form).then((res) => {
          if (res.code == 200) {
            // this.bottom3 = res.data;
            // if (this.bottom3.length == 1) {
            //   let obj = {
            //     name: "正常停机",
            //     value1: "0次",
            //     value2: "0分钟",
            //     value3: "0.00%",
            //   };
            //   this.bottom3.push(obj);
            // }
            // this.bottom3a = JSON.parse(JSON.stringify(res.data));
            // for (let item of this.bottom3a) {
            //   item.value = item.value1.replace("次", "");
            // }
            if (res.code == 200) {
              this.bottom3.list = res.data.list;
              this.bottom3.all = res.data.total;
              let num = 0
              for (let item of this.bottom3.list) {
                item.value = item.value1;
                num += Number(item.value1)
              }
              for (let item of this.bottom3.list) {
                item.value2 = item.value2 + '(占比:' + (Number(item.value1) / num * 100).toFixed(2) + '%)';
              }
            }
          }
        });
      },
      //统计分析-停机分析-全部
      productDayCount4All() {
        let obj = JSON.parse(JSON.stringify(this.bottom3Form));
        obj.all = "111";
        ProductDayCount4_1(obj).then((res) => {
          if (res.code == 200) {
            for (let item of res.data.list) {
              item.value = item.value1;
            }
            this.$refs.AllDialog.unit = "";
            this.$refs.AllDialog.tableData.column[4].prop = "value2";
            this.$refs.AllDialog.tableData.data = res.data.list;
          }
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "";
        });
      },
      //停机分析页面跳转
      xRowEcharts(e) {
        this.$router.push({
          path: "/produce/stop/stop",
          query: {
            eqpName: e.name,
            stopDateStart: this.bottom3Form.stopDateStart + " 00:00:00",
            stopDateEnd: this.bottom3Form.stopDateEnd + " 00:00:00",
          },
        });
      },
      radioChange3(event) {
        this.bottom3Form.stopDateStart = event[0];
        this.bottom3Form.stopDateEnd = event[1];
        this.productDayCount4();
      },
      //统计分析-生产天数
      productDayCount5() {
        ProductDayCount5(this.bottom4Form).then((res) => {
          if (res.code == 200) {
            this.bottom4 = res.data;
          }
        });
      },
      //主要产成品产量
      planCount4() {
        PlanCount4(this.bottom4Form).then((res) => {
          this.bottom4 = res.data;
          for (let item of this.bottom4) {
            item.value = Number(item.value).toFixed(0);
          }
        });
      },
      //主要产成品产量-全部
      planCount4All() {
        let obj = JSON.parse(JSON.stringify(this.bottom4Form));
        obj.all = "111";
        PlanCount4(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.unit = " 标准箱";
            for (let item of res.data) {
              item.name = item.name + " (计划量:" + item.value2 + ")";
              item.value = Number(item.value).toFixed(0);
            }
            this.$refs.AllDialog.tableData.data = res.data;
            this.$refs.AllDialog.right.unit = "";
          }
          this.$refs.AllDialog.dialogTableVisible = true;
        });
      },
      radioChange4(event) {
        this.bottom4Form.pDateStart = event[0];
        this.bottom4Form.pDateEnd = event[1];
        this.planCount4();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .clzdjd_box {
    width: 75%;
    // height: 80%;
    height: 110px;
    position: relative;
    left: -5%;

    .clzdjd_item {
      height: 40px;

      .clzdjd_item_left {
        width: 13%;
        height: 100%;
        position: relative;

        .index {
          position: absolute;
          color: #ffffff;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          margin: auto;
        }

        .bigCir {
          width: 20px;
          height: 20px;
          border: 1px solid #02d5c2;
          // background: rgba(66, 169, 255, 0.3);
          border-radius: 50%;
          position: relative;
          left: -30%;

          .smallCir {
            width: 10px;
            height: 10px;
            border: 1px solid #02d5c2;
            // background: red;
            border-radius: 50%;
          }

          .border {
            width: 1px;
            height: 12px;
            background: #02d5c2;
            position: absolute;
            top: 130%;
          }
        }
      }

      .clzdjd_item_right {
        width: 70%;
        height: 75%;
        margin-left: 1%;
        max-width: 435px;
        max-height: 124px;
        background: linear-gradient(180deg,
            rgba(44, 119, 187, 0.6) 0%,
            rgba(18, 81, 141, 0.6) 100%);
        border: 1px solid rgba(52, 134, 218, 0.6);
        // background: red;
        font-size: 15px;
        color: #00ebcd;

        .lt {
          width: 48%;
          // background-color: #fff;
          text-align: left;
          padding-left: 10px;
        }

        .rt {
          width: 51%;
          // background-color: red;
          padding-left: 0px;
          font-weight: 700;
        }
      }
    }

    .clzdjd_item:last-child .border {
      width: 0 !important;
    }
  }

  @media screen and (max-width: 1000px) {
    .clzdjd_box {
      width: 100%;
    }
  }

  .tjfx {
    width: 100%;
    height: 100%;
    position: relative;

    .tjfx_left,
    .tjfx_right {
      // border: 1px solid black;
      background-image: url("~@/assets/images/echarts/33_left.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 250px;
      height: 120px;

      .tjfx_left_top {
        position: relative;

        .zctj {
          position: absolute;
          font-size: 14px;
          left: 28%;
          top: 3.5px;
          color: white;
        }

        .yctj {
          position: absolute;
          font-size: 14px;
          left: 49%;
          top: 3.5px;
          color: white;
        }

        .tjsz_lt,
        .tjsz_rt {
          position: absolute;
          top: 26.5px;
          left: 5px;
          width: 190px;
          height: 90px;
          // border: 1px solid white;
          font-size: 14px;
          color: white;

          .tjcs,
          .tjsc,
          .zb {
            width: 100%;
            height: 10px;
            display: inline-flex;
            margin-top: 10px;
            margin-left: 6px;

            .tjcs_lt,
            .tjsc_lt,
            .zb_lt {
              // width: 70px;
              width: 65px;
              height: 15px;
              // border: 1px solid white;
              background-image: url("~@/assets/images/echarts/33_bc.png");
              background-size: 100% 100%;
            }

            .tjcs_rt,
            .tjsc_rt,
            .zb_rt {
              color: #3bffe6;
              font-size: 14px;
              text-shadow: 1px 0px 3px #3bffe6;
            }
          }
        }

        .tjsz_rt {
          left: 55px;

          .tjcs,
          .tjsc,
          .zb {
            width: 100%;
            height: 10px;
            display: inline-flex;
            margin-top: 10px;
            margin-left: 6px;

            .tjcs_rt,
            .tjsc_rt,
            .zb_rt {
              color: #23c3ff;
              font-size: 14px;
              text-shadow: 1px 0px 3px #23c3ff;
            }
          }
        }
      }
    }

    .tjfx_center {
      margin-top: 15px;
      width: 130px;
      height: 140px;
    }

    .tjfx_right {
      width: 250px;
      height: 120px;
      // border: 1px solid black;
      background-image: url("~@/assets/images/echarts/33_right.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  .seven_content {
    z-index: 10;
    background: #093b76;
    width: 100%;
    height: 100%;
    // overflow: auto;
    overflow: hidden;

    .content_top,
    .content_center {
      //  background: yellow;
      //   background: red;
      width: 100%;
      height: 64.8%;

      .title_box {
        position: relative;
        box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);

        .top {
          height: 40px;
          width: 100%;
          border-bottom: 1px solid #2a8cf04a;
          display: flex;
          padding: 0 15px;
          align-items: center;

          .border {
            width: 3px;
            height: 16px;
            background: #06ffff;
          }

          span {
            font-size: 16px;
            font-family: Adobe Heiti Std, Adobe Heiti Std-R;
            font-weight: R;
            text-align: left;
            margin-left: 10px;
            color: #ffffff;
          }
        }
      }
    }

    .content_center {
      .echartsBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.8% 0.8% 0.5%;

        .scts {
          width: 60%;
          height: 150px;

          // border: 1px solid red;
          .scts_ts {
            width: 120px;
            height: 80%;

            // margin: auto;
            // background-color: #fff;
            .tu {
              width: 105px;
              height: 105px;
              background-image: url("~@/assets/images/echarts/zu180.png");
              background-size: 100% 100%;
              text-align: center;
              display: table-cell;
              vertical-align: middle;
              color: #3bffe6;
              font-weight: 700;
              font-size: 22px;
            }

            .tu_2 {
              color: #1fb8f1;
              background-image: url("~@/assets/images/echarts/zu180_1.png");
              background-size: 100% 100%;
            }

            .wenzi {
              width: 100px;
              height: 22px;
              margin-top: 10px;
              // border: 1px solid red;
              text-align: center;
              background-image: url("~@/assets/images/echarts/圆角矩形 1.png");
              background-size: 100% 100%;
              color: #03e6f5;
              font-size: 14px;
            }
          }

          .center {
            width: 25%;
            height: 100%;
          }
        }
      }
    }

    .content_top {
      height: 23.8%;
      border-bottom: 4px solid rgba(9, 72, 141, 1);
      // background: red;
    }

    .bzjk_box {
      width: 100%;
      height: calc(100% - 40px);
      // padding: 10px 1%;
      padding: 0px 1%;

      .sjtj_item {
        width: 24%;
        height: 125px;
        margin: 0px 1%;
        background: linear-gradient(180deg,
            rgba(14, 81, 141, 0.5) 0%,
            rgba(18, 81, 141, 0.5) 100%);
        border: 1px solid #2489ee71;
        padding: 3px;
        position: relative;

        .title {
          font-size: 17px;
          width: 100%;
          height: 44%;
          background: rgba(40, 107, 173, 0.6);
          letter-spacing: 1px;
          font-weight: 400;
        }

        .number {
          width: 100%;
          height: 75%;
          background: rgba(35, 107, 173, 0.6);
          background-image: url("~@/assets/images/echarts/zhuangshi.png");
          background-size: 100% 100%;
          margin-top: 1%;
          //   border-bottom: 3px solid rgba(0, 192, 255, 0.9);
          position: relative;

          .num_top {
            font-size: 30px;
            position: absolute;
            top: 10%;
            font-weight: 500;
            // color: rgba(0, 192, 255, 0.9);
          }

          .num_bottom {
            position: absolute;
            bottom: 1.7%;
            color: white;
            font-size: 15px;
          }

          .num_top_baifenbi {
            position: absolute;
            top: 15%;
            font-size: 35px;
          }
        }
      }

      @media screen and (max-width: 1000px) {
        .sjtj_item {
          width: 24%;
          height: 100px;
        }
      }
    }

    .Echarts {
      height: calc(100% - 50px);
    }

    @media screen and (max-width: 1000px) {
      .Echarts {
        height: 100%;
      }
    }

    .center2 {
      width: 390px;
      // background: red;
    }

    .center_echarts {
      height: 180px;
    }
  }

  @media screen and (max-width: 1000px) {
    .seven_content {

      // overflow-y: auto!important;
      .num_top {
        font-size: 28px !important;
      }

      .num_bottom {
        font-size: 14px !important;
      }

      .content_center {
        height: 75% !important;
        overflow-x: hidden;

        .wenzi {
          margin-top: 5px !important;
        }

        .echartsBox {
          height: calc(100% - 50px) !important;
        }
      }

      .content_top {
        height: 25% !important;
        overflow-x: hidden;
      }
    }
  }
</style>